<template>
  <layout title="border边框">

    <layout-content title="基础使用">
      <view class="border-block tn-border">
        默认
      </view>
      <view class="border-block tn-border-dashed">
        虚线
      </view>
      <view class="border-block tn-border-bold">
        加粗
      </view>
      <view class="border-block tn-border-bold tn-border-dashed">
        加粗虚线
      </view>
    </layout-content>

    <layout-content title="去除某一边">
      <view class="border-block tn-border-none-top">
        去除上边框
      </view>
      <view class="border-block tn-border-none-bottom">
        去除下边框
      </view>
      <view class="border-block tn-border-dashed tn-border-none-left">
        去除左边框
      </view>
      <view class="border-block tn-border-dashed tn-border-none-right">
        去除右边框
      </view>
      <view class="border-block tn-border-bold tn-border-none-top tn-border-none-left">
        去除左上边框
      </view>
    </layout-content>

    <layout-content title="显示某一边">
      <view class="border-block tn-border-top">
        显示上边框
      </view>
      <view class="border-block tn-border-bottom">
        显示下边框
      </view>
      <view class="border-block tn-border-dashed tn-border-bold tn-border-left">
        显示左边框
      </view>
      <view class="border-block tn-border-dashed tn-border-bold tn-border-right">
        显示右边框
      </view>
      <view class="border-block tn-border-bold tn-border-top tn-border-left">
        显示左上边框
      </view>
    </layout-content>

    <layout-content title="边框颜色(使用内置颜色值进行设置)">
      <view class="border-block tn-border-red"></view>
      <view class="border-block tn-border-green--light"></view>
      <view class="border-block tn-border-blue--disabled"></view>
      <view class="border-block tn-border-orange--dark"></view>
      <view class="border-block tn-border-indigo tn-border-dashed"></view>
      <view class="border-block tn-border-lime tn-border-bold"></view>
    </layout-content>
  </layout>
</template>

<script lang="ts" setup>
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
</script>

<style lang="scss" scoped>
.border-block {
  display: inline-block;
  width: calc(100% - 8rpx);
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0rpx 4rpx;
  margin-top: 20rpx;
  &:first-child {
    margin-top: 0rpx;
  }
}
</style>
